import App from './App.vue';
import { createApp, watchEffect } from 'vue';
import { useTitle } from '@vueuse/core';
import { $t, setupI18n } from '@/locales';

import { preferences } from '@/core/preferences';
import { router } from './router';
import { initStores } from './store';
import { vPermission } from './directives/perm';

import 'normalize.css';
import '@/styles';

export async function bootstrap(namespace: string) {
  const app = createApp(App);
  // 初始化国际化
  await setupI18n(app);

  // 配置pinia
  await initStores(app, { namespace });

  // 挂载router和路由守卫
  app.use(router);

  // 按钮权限指令
  app.directive('permission', vPermission);

  watchEffect(() => {
    if (preferences.app.dynamicTitle) {
      const routeTitle = router.currentRoute.value.meta?.title as string;
      const pageTitle =
        (routeTitle ? `${$t(routeTitle)} - ` : '') + preferences.app.name;
      useTitle(pageTitle);
    }
  });
  app.mount('#app');
}
